<template>
	<div class="kaochangguanli">
    <top></top>
    <div style="background: #f7f7f7;padding: 30px 0 30px;">
      <div class="ww" style="font-size: 36px;">
        查找考试
      </div>
    </div>
    <!-- <div class="ww" style="padding: 50px 0;">
      <div style="margin-bottom: 20px;">您可以在奥地利的 200 多个考试中心参加 ÖSD 考试，或者在我们全球的 200 个（大约）国际中心参加 ÖSD 考试。考试日期是定期提供的。一些考试中心还提供 ÖSD 考试的特殊准备课程。为了参加 ÖSD 考试，您无需事先参加课程。</div>

      <div>有关考试日期和准备课程的信息会定期更新。请注意，更改可能会在短时间内发生。</div>
    </div> -->
    <div class="ww" style="padding: 50px 0 50px;">

      <div class="flexbc" style="background: #f7f7f7; padding: 15px 30px; border-bottom: 1px #ccc solid; width: 100%;">
        <div style="font-weight: bold;">位置</div>
        <div>
          <!-- <el-select v-model="value" style="width: 250px;" placeholder="请选择国家">
              <el-option label="身份证" value="1"></el-option>
              <el-option label="护照" value="2"></el-option>
          </el-select> -->

          <!-- <el-select v-model="all.birthadr" style="width: 250px;" placeholder="请选择国家">
              <el-option :label="item" :value="item" v-for="(item,index) in guojias":key="index"></el-option>
          </el-select> -->
          <el-select v-model="all.provice" style="width: 250px;" placeholder="请选择城市">
              <el-option :label="item" :value="item" v-for="(item,index) in shengs":key="index"></el-option>
          </el-select>
        </div>
      </div>
      <div class="flexbc" style="background: #f7f7f7; padding: 15px 30px; border-bottom: 1px #ccc solid; width: 100%;">
        <div style="font-weight: bold;">考试时间</div>
        <div>
          <el-date-picker style="width: 400px;" v-model="times" @change="timechange"	clearable value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"	range-separator="——" start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
        </div>
      </div>
      <div class="flexbc" style="background: #f7f7f7; padding: 15px 30px; border-bottom: 1px #ccc solid; width: 100%; margin-bottom: 50px;">
        <div style="font-weight: bold;">考试级别</div>
        <div>
          <el-select v-model="all.name" style="width: 250px;" placeholder="请考试级别">
              <el-option label="奥德欧标德语（青少年）语言证书A1" value="1"></el-option>
              <el-option label="奥德欧标德语（成人）语言证书A1" value="2"></el-option>
              <el-option label="奥德欧标德语（青少年）语言证书 A2" value="3"></el-option>
              <el-option label="奥德欧标德语（成人）语言证书A2" value="4"></el-option>
              <el-option label="奥德欧标德语（青少年）语言证书B1" value="5"></el-option>
              <el-option label="奥德欧标德语（成人）语言证书 B1" value="6"></el-option>
              <el-option label="奥德欧标德语（青少年）语言证书B2" value="7"></el-option>
              <el-option label="奥德欧标德语（成人）语言证书 B2" value="8"></el-option>
              <el-option label="奥德欧标德语（针对护理和医学工作者）语言证书 B2" value="9"></el-option>
              <el-option label="奥德欧标德语（青少年）语言证书C1" value="10"></el-option>
              <el-option label="奥德欧标德语（成人）语言证书C1" value="11"></el-option>
              <el-option label="奥德欧标德语（成人）语言证书C2" value="12"></el-option>
              <el-option label="奥德欧标德语（经济德语）语言证书C2" value="13"></el-option>
          </el-select>
        </div>
      </div>

      <div class="flexbc" style=" border-bottom: 1px #ccc solid; padding:20px 10px;" v-for="item in list" :key="item.id">
        <div>
          <div style=" margin-bottom: 10px; color: #0872BA; font-size: 20px;">{{item.testclass}}/{{item.testsubj}}</div>
          <div style="font-weight: bold; margin-bottom: 10px; font-size: 12px; color: #7C7C7C;" class="flexc">
            <div style="background: #E0E0E0; padding: 5px 10px; border-radius: 3px; margin-right: 10px;">报名结束时间</div>
            <div>{{item.endtime}}</div>
            <div style="background: #E0E0E0; padding: 5px 10px; border-radius: 3px; margin-right: 10px; margin-left: 20px;">考试时间</div>
            <div>{{item.testtime}}</div>
          </div>
          <div style="font-weight: bold; margin-bottom: 10px; font-size: 12px; color: #7C7C7C;" class="flexc">
            <div style="background: #E0E0E0; padding: 5px 10px; border-radius: 3px; margin-right: 10px;">考试中心</div>
            <!-- <div>白鹤 - Chinazentrum für Sprache und Kultur / Denk Kreativ Bildung OG Peking - 中国 - Peking</div> -->
            <div>{{item.name_eng}}/{{item.name_cn}}/可容纳{{item.maxnum}}人</div>
          </div>

          <div class="flexc" style=" font-size: 12px; color: #7C7C7C;">
            <div style="background: #E0E0E0; font-weight: bold; padding: 5px 10px; border-radius: 3px; margin-right: 10px;">考试位置</div>
            <!-- <div>Aery Sprachschule Zhangzhouer Straße A-1501 266073 青岛市， 山东省 </div> -->
            <div>{{item.address_eng}}/{{item.address_cn}}/{{item.city}}</div>

            <div style="background: #E0E0E0; padding: 5px 10px; border-radius: 3px; margin-right: 10px; margin-left: 10px;">联系</div>
            <div>{{item.email}}</div>
          </div>
        </div>
        <div class="flexc">
          <div v-if="item.testclass == '奥德欧标德语（成人）B1'"><img src="../../../static/img/icon-ZB1.svg" style="width: 100px; height: 100px; margin-right: 20px;"></div>
          <div v-if="item.testclass == '奥德欧标德语（成人）A2'"><img src="../../../static/img/icon-ZA2.svg" style="width: 100px; height: 100px; margin-right: 20px;"></div>
          <!-- <el-button type="primary">查看详情 ></el-button> -->
          <el-button type="primary" @click="baoming(item)">点击报名</el-button>
        </div>
      </div>
    </div>

    <el-dialog  title="报名考试"  :visible.sync="log"  width="800px" :close-on-click-modal="false" :close-on-press-escape="false">

      <!-- <div style="padding: 5px 10px;" class="flexc">
        <div style=" margin-right: 30px;">考生年龄：</div>
        <el-select v-model="dangqianbaoming.age" style="width: 350px;" placeholder="按照出生日期与考试日期的时间间隔计算">
            <el-option :label="item" :value="item" v-for="item in 99" :key="item"></el-option>
        </el-select>
      </div>

      <div style="padding: 5px 10px;">如果考生考试时未满18周岁，请上传未成年人报名确认函(下载文件见下)</div>
      <div style="padding: 5px 10px; color: #0872BA; cursor: pointer;" @click="xiazai('https://file.storep.91haoka.cn/gantanhao/querenhan.docx?attname=')">成年人报名确认函点击下载</div>
      <div style="padding: 5px 10px;">请打印、填写、签字、扫描、上传。请注意:如果报名人年龄未满18周岁，必须上传由法定监护人签署好的此文件，否则该报名为无效报名，语言办公室不子处理。</div>

      <div style="padding: 5px 10px;" class="flexc">
        <div style=" margin-right: 30px;">成年人报名确认函上传：</div>
        <chuantu @getimgid="getimgid" :imgid="dangqianbaoming.photo1" v-if="relo" :zi="'成年人报名确认函上传'" style="width: 316px; height: 200px;"></chuantu>
      </div> -->


      <div style="padding: 5px 10px; margin-top:30px;">
        <el-checkbox v-model="dangqianbaoming.c1">我已知晓下列物品被禁止带入考场:</el-checkbox>
        <div style="margin-top: 5px;"></div>
        <div>1.手机、PAD、笔记本电脑、电子词典、智能手表电子手表、蓝牙耳机等所有电子产品 </div>
        <div>2.录音笔和所有具备录音功能的物品。</div>
      </div>



      <div style="padding: 5px 10px; margin-top:30px;">
        <div>如果您需要在考试期间存放个人物品，请认真阅读<span style="color: #0872BA; cursor: pointer;" @click="xiazai('https://file.storep.91haoka.cn/gantanhao/mianze.docx?attname=')">《个人物品免费存放免责声明书》</span>,并在下一项中确认同意。</div>
      </div>
      <div style="padding: 5px 10px;">
        <el-checkbox v-model="dangqianbaoming.c6">我同意《个人物品免费存放免责声明书》</el-checkbox>
      </div>

      <div style="padding: 5px 10px; color: #f00; font-size: 14px;">
        注意：只有身份证件、准考证、水、眼镜、纸巾和能量补充剂可以带入考场，其他个人物品包括纸笔均须留在考场外。推荐考生不要携带贵重物品来参加考试，若上交物品发生损伤或者丢失，我院不负麦赔偿损失。
      </div>

      <div style="padding: 5px 10px; margin-top:30px; font-size: 18px;">通过提交报名表，您证实您的个人资料的正确性和完整性(与身份证/护照一致)。</div>

      <!-- <div style="padding: 5px 10px;">
        <el-checkbox v-model="dangqianbaoming.c2">我已知晓</el-checkbox>
        <div style="margin-top: 5px;">考生可以退考，但无权要求退还已缴纳的考试费用。退考申请必须以书面形式明确提出。</div>
      </div>

      <div style="padding: 5px 10px;">
        <el-checkbox v-model="dangqianbaoming.c3">我已知晓</el-checkbox>
        <div style="margin-top: 5px;">
          因个人原因提出的延考申请最迟必须在考试日前第六个工作日书面提交。考试日前的五个工作日内不接受因个人原因延考。因疾病原因提出的延考申请最迟必须在考试日前一个工作日书面提交，
          考试当日不再接受延考申请，因病延考必须提交医院开具的诊断证明。考试共计可以延期1次，必须在首次报名考试后的6个月内。
        </div>
      </div> -->

      <div style="padding: 5px 10px; font-weight: bold; margin-top: 30px;">付款信息</div>

      <div style="padding: 5px 10px; font-weight: bold;">
        <div>
          奥德欧标德语语言证书 A2(成人)  <span style="color: #f00;">1600元</span>
        </div>
        <div style="margin-bottom: 20px;">
          奥德欧标德语语言证书 B1(成人或青少年) <span style="color: #f00;">2000元</span>
        </div>

        <div>
          公司名称：帕大（北京）国际教育科技有限公司
        </div>
        <div>
          账号：110957453810008
        </div>
        <div>
          开户行：招商银行股份有限公司北京顺义支行
        </div>
        <div>
          行号：308100006021
        </div>
        <div style="color: #f00; font-weight: bold;">
          汇款附言:  身份证号
        </div>

      </div>


      <div style="padding: 5px 10px; margin-top: 30px;">
        <el-checkbox v-model="dangqianbaoming.c4">本人承诺:对以上提供的相关信息的真实性负责。</el-checkbox>
      </div>

      <div style="padding: 5px 10px;">
        <el-checkbox v-model="dangqianbaoming.c5">我已经阅读</el-checkbox>
        <span style="color: #0872BA; cursor: pointer;" @click="xiazai('https://file.storep.91haoka.cn/gantanhao/baokaoxuzhi.docx?attname=')">奥德欧标德语考试院考试规定</span>、 <span style="color: #0872BA; cursor: pointer;"  @click="xiazai('https://file.storep.91haoka.cn/gantanhao/baokaoxuzhi.docx?attname=')">奥德欧标德语考试考生须知</span>
        ，并接受。
      </div>





      <div slot="footer" class="dialog-footer">
        <el-button type="primary" round @click="quedingbaoming">确定报名</el-button>
      </div>

    </el-dialog>
	</div>
</template>

<script>
  import chuantu from '../../components/chuantu.vue'
  import top from '../top2.vue'
	export default {
		name: 'kaochangguanli',
    components:{
      top,chuantu
    },
		data() {
			return {
        all:{
          name_cn:"",//考场名称
          name_eng:"",//
          testsubj:"",//考试科目
          address_cn:"",//考场地址
          address_eng:"",//
          city:"",//考场所在城市
          testclass:"",//考试等级
          testname:"",//考试名称
          email:"",//考点联系人email
          testtime:"",//考试时间
          endtime:"",// 报名结束时间
          maxnum:"",// 考点可容纳人数
        },
        all2:{
          photo1:""
        },
        list:[],
        guojias:"",
        shengs:"",
        fukuanxinxi:{},
        log:false,
        relo:true,
        dangqianbaoming:{
          id:"",
          c1:true,
          c2:true,
          c3:true,
          c4:true,
          c5:true,
          c6:true
        }
			}
		},
		created() {
      this.huoqu()
      this.getxiala()
		},
		mounted() {

		},
		methods: {
      xiazai:function(url){
        window.location = url
      },
      getimgid:function(val){
        this.dangqianbaoming.photo1 = val
      },
      getfukuanxinxi:function(item){
        axios.post(this.IP_URL+'/user/payinfo',{testid:item.id}).then((response)=>{
          if(response.data.errorcode == 0){
            this.fukuanxinxi = response.data.data
          } else {
            this.$message.error(response.data.reason);
          }
        })
      },
      quedingbaoming:function(){
        if(this.dangqianbaoming.c1 && this.dangqianbaoming.c2 && this.dangqianbaoming.c3 && this.dangqianbaoming.c4 && this.dangqianbaoming.c5 && this.dangqianbaoming.c6 ){
          axios.post(this.IP_URL+'/user/addtest',{sitetestid:this.dangqianbaoming.id}).then((response)=>{
            if(response.data.errorcode == 0){
              this.$message.success('报名成功');
              this.log = false
              this.$router.push('/gerenzhongxin?act=4')
            } else {
              if(response.data.errorcode == 4){
                this.$message.error('您的信息不完整，请先进入个人中心维护个人信息');
                this.$router.push('/gerenzhongxin')
                // window.open(location.origin + '/gerenzhongxin?buwanzheng=true')
              }else{
                this.$message.error(response.data.reason);
              }

            }
          })
        }else{
          this.$message.error('请先同意协议');
        }
      },
      baoming:function(item){

        axios.post(this.IP_URL+'/user/getinfo').then((response)=>{
          if(response.data.errorcode == 0){
            this.dangqianbaoming.id = item.id
            this.log = true
          } else {
            this.$router.push('/denglu')
          }
        })

      },
      getxiala:function(){
        axios.post(this.IP_URL+'/getcountrys',{lang:'cn'}).then((response)=>{
          if(response.data.errorcode == 0){
            this.guojias = response.data.data
          } else {
            this.$message.error(response.data.reason);
          }
        })
        axios.post(this.IP_URL+'/getprovices').then((response)=>{
          if(response.data.errorcode == 0){
            this.shengs = response.data.data
          } else {
            this.$message.error(response.data.reason);
          }
        })
      },
      huoqu:function(){
        axios.post(this.IP_URL+'/user/canaddtest').then((response)=>{
          if(response.data.errorcode == 0){
            this.list = response.data.data
          } else {
            this.$message.error(response.data.reason);
          }
        })
      },

    }
	}
</script>


<style scoped >

</style>
